<template>
  <div class="app-container">
    <div class="mb-20">
      <el-button
        class="btn-active"
        icon="el-icon-plus"
        size="mini"
        @click="goAdd"
        >新增指令</el-button
      >
      <el-button
        class="btn-delete"
        icon="el-icon-delete"
        size="mini"
        @click="deleteRow"
        >删除</el-button
      >
    </div>
    <div class="search">
      <el-form ref="form" :model="form" label-width="80px" inline>
        <el-form-item label="">
          <el-input v-model="form.comdName" placeholder="指令名称" />
        </el-form-item>
        <el-form-item label="">
          <el-input v-model="form.comdCode" placeholder="指令代号" />
        </el-form-item>
        <el-form-item label="">
          <el-button size="mini" icon="el-icon-search" @click="search"
            >查询</el-button
          >
          <el-button size="mini" icon="el-icon-refresh-right" @click="search(1)"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-background="rgba(0, 0, 0, 0.8)"
      element-loading-text="加载中"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="序号" width="95">
        <template slot-scope="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column label="指令名称">
        <template slot-scope="scope">
          {{ scope.row.comdName }}
        </template>
      </el-table-column>
      <el-table-column label="指令代号" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.comdCode }}</span>
        </template>
      </el-table-column>
      <el-table-column label="指令值" align="center">
        <template slot-scope="scope">
          {{ scope.row.comdData }}
        </template>
      </el-table-column>
      <el-table-column label="指令信息描述" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.comdDesc }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="created_at"
        label="操作"
        width="240"
      >
        <template slot-scope="scope">
          <el-button
            class="detail"
            icon="el-icon-edit-outline"
            @click="goEdit(scope.row)"
            >编辑</el-button
          >
          <el-button
            class="detail"
            icon="el-icon-refresh-right"
            @click="goEdit(scope.row, flag)"
            >详情</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 50]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <el-dialog
      title="添加指令"
      :visible.sync="dialogFormVisible"
      :modal="false"
    >
      <el-form ref="dialogForm" :model="dialogForm">
        <el-row>
          <el-col :span="12">
            <el-form-item
              label="指令名称"
              prop="comdName"
              :rules="{
                required: true,
                message: '指令名称不能为空',
                trigger: 'blur',
              }"
            >
              <el-input v-model="dialogForm.comdName" style="width: 90%" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="指令代号"
              prop="comdCode"
              :rules="{
                required: true,
                message: '指令名称不能为空',
                trigger: 'blur',
              }"
            >
              <el-input v-model="dialogForm.comdCode" style="width: 90%" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item
              label="指令值"
              prop="comdData"
              :rules="{
                required: true,
                message: '指令值不能为空',
                trigger: 'blur',
              }"
            >
              <el-input v-model="dialogForm.comdData" style="width: 90%" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="操作类型">
              <el-select
                v-model="optionType"
                placeholder="请选择"
                style="width: 90%"
              >
                <el-option label="设备" value="1" />
                <el-option label="仪器" value="2" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              v-if="optionType == 1"
              label="关联设备/仪器"
              prop="deviceId"
              :rules="{
                required: true,
                message: '关联设备/仪器不能为空',
                trigger: 'blur',
              }"
            >
              <el-select
                v-model="dialogForm.deviceId"
                placeholder="请选择"
                style="width: 90%"
                @change="getOrder"
              >
                <el-option
                  v-for="item in devicelist"
                  :key="item.deviceId"
                  :label="item.deviceName"
                  :value="item.deviceId"
                />
              </el-select>
            </el-form-item>
            <el-form-item
              v-else
              prop="instrumentId"
              :rules="{
                required: true,
                message: '关联设备/仪器不能为空',
                trigger: 'blur',
              }"
              label="关联设备/仪器"
            >
              <el-select
                v-model="dialogForm.instrumentId"
                placeholder="请选择"
                style="width: 90%"
              >
                <el-option
                  v-for="item in machinelist"
                  :key="item.instrumentId"
                  :label="item.instrumentName"
                  :value="item.instrumentId"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="指令信息描述">
          <el-input v-model="dialogForm.comdDesc" type="textarea" :rows="2" />
        </el-form-item>
      </el-form>
      <div class="center">
        <el-button v-if="!detailFlag" type="primary" @click="submit"
          >提交</el-button
        >
        <el-button class="cancel" @click="dialogFormVisible = false"
          >取消</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getOrder, getDeviceList, getMachineList } from "@/api/table";
import { addComd, editComd, delComd } from "@/api/form";
import { opreAndComdList, getOperateTypeList } from "@/api/dict";
export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "gray",
        deleted: "danger",
      };
      return statusMap[status];
    },
  },
  data() {
    return {
      dialogFormVisible: false,
      dialogForm: {},
      options: [],
      types: [],
      form: {},
      list: null,
      optionType: "1",
      listLoading: true,
      val: "",
      currentPage: 1,
      pageNum: 10,
      detailFlag: false,
      total: 0,
      devicelist: [],
      machinelist: [],
    };
  },
  created() {
    getDeviceList({
      pageSize: 1000,
      pageNum: 1,
    }).then((res) => {
      this.devicelist = res.rows;
    });
    getMachineList({
      pageSize: 1000,
      pageNum: 1,
    }).then((res) => {
      this.machinelist = res.rows;
    });
    getOperateTypeList().then((res) => {
      console.log(res);
      this.options = res.data;
    });
    this.fetchData();
  },
  methods: {
    deleteRow() {
      delComd({
        ids: this.multipleSelection.map((item) => item.comdId).join(","),
      }).then((res) => {
        if (res.code == 200) {
          this.$message.success("操作成功");
          this.fetchData();
        }
      });
    },
    search(num) {
      if (num == 1) {
        this.form = {};
      }
      this.currentPage = 1;
      this.fetchData();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSizeChange(val) {
      this.pageNum = val;
      this.fetchData();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.fetchData();
    },
    goEdit(row, flag) {
      this.detailFlag = flag;
      this.dialogForm = row;
      this.dialogFormVisible = true;
    },
    submit() {
      this.$refs["dialogForm"].validate((valid) => {
        if (valid) {
          if (this.dialogForm.comdId) {
            editComd(this.dialogForm).then((res) => {
              if (res.code == 200) {
                this.$message.success("操作成功");
                this.dialogFormVisible = false;
                this.fetchData();
              }
            });
            return;
          }
          addComd(this.dialogForm).then((res) => {
            if (res.code == 200) {
              this.$message.success("操作成功");
              this.dialogFormVisible = false;
              this.fetchData();
            }
          });
        }
      });
    },
    goAdd() {
      this.dialogForm = {};
      this.dialogFormVisible = true;
    },
    getVal(e) {
      opreAndComdList({ deviceType: e }).then((res) => {
        console.log(res);
        this.types = res.data;
      });
    },
    fetchData() {
      getOrder({
        pageNum: this.currentPage,
        pageSize: this.pageNum,
        ...this.form,
      }).then((res) => {
        console.log(res);
        this.listLoading = false;
        this.list = res.rows;
        this.total = res.total;
      });
      // this.listLoading = true;
    },
  },
};
</script>
<style scoped lang="scss">
::v-deep {
  .detail.el-button {
    padding: 9px 4px;
  }
}
::v-deep {
  .v-modal {
    background: none;
  }
}
::v-deep {
  .el-dialog {
    color: white;
    background: rgb(3, 28, 43);
    .el-dialog__title,
    .el-form-item__label {
      color: white;
    }
  }
}
</style>
